<template>
  <div class="con">
    <header>
      <div class="left" @click="onClickLeft">
        <van-icon name="arrow-left" />
        <p>返回</p>
      </div>
      <div class="center">
        <p>京东收银台</p>
      </div>
      <div class="right"></div>
    </header>
    <main>
      <div class="main1">
        <van-icon name="goods-collect-o" class="goods" />
        <p>
          您一共有一笔订单需要支付，请在
          <span style="color:#e22e47">30分钟</span>内完成，不然就要溜走了！
        </p>
      </div>
      <div class="content">
        <div class="main2">
          <div class="mm">
            <div class="m1">
              <div class="left">
                <p>订单编号:20191106646047</p>
              </div>
              <div class="right">1/1</div>
            </div>
            <div class="m2">
              <div class="bg" v-for="(item,i) in orderList" :key="i">
                <img :src="item.pimg" alt />
              </div>
            </div>
          </div>

          <div class="main3">
            <div class="l">
              <p>应付金额:</p>
            </div>
            <div class="r">
              <p>￥{{sumupprice}}</p>
            </div>
          </div>

          <div class="main3">
            <div class="l">
              <p>抵扣总和:</p>
            </div>
            <div class="r">
              <p>￥0</p>
            </div>
          </div>

          <div class="main4">
            <div class="l">
              <p>实际需付:</p>
            </div>
            <div class="r">
              <p>￥{{sumupprice}}</p>
            </div>
          </div>

          <div class="main5">
            <div class="l">
              <p>在线支付:</p>
            </div>
            <div class="r">
              <p>更多支付方式</p>
            </div>
          </div>

          <div class="main6">
            <van-radio-group v-model="radio">
              <van-cell-group>
                <van-cell title="支付宝钱包" clickable @click="radio = '1'">
                  <van-radio slot="right-icon" name="1" />
                </van-cell>
                <van-cell title="微信支付" clickable @click="radio = '2'">
                  <van-radio slot="right-icon" name="2" />
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </div>

          <div class="main7">
            <van-button type="danger" class="truepay" @click="pay()">确认支付</van-button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import * as api from "../../api/getproductlist";
export default {
  name: "Pay",
  data() {
    return {
      radio: "1",
      shop: "",
      sumupprice:0,
      orderList:[]
    };
  },
  methods: {
    onClickLeft(id) {
      // this.$router.go(-1);
      this.$dialog
        .confirm({
          title: "确认要离开吗?",
          message: "您的商品在30分钟内未支付就会悄悄溜走啦，请尽快完成支付。"
        })
        .then(() => {
          // on confirm
          this.$router.push('/cart');
        })
        .catch(() => {});
    },
    pay(){
      this.$dialog.confirm({
         title: "支付",
          message: "确定要支付吗"
      }).then(() => {
          // on confirm
          api.uporder({oid:this.$route.query.oid}).then(data=>{
            this.$toast.success('支付成功')
            this.$router.push('/cart')
          })
        })
        .catch(() => {});
    }
  },
  mounted() {
    console.log(this.$route.query.id);
     let orderList=[]
    if(typeof(this.$route.query.id)=='number'){
      this.sumupprice=this.$route.query.pprice
      
      api.getproinfo({pid:this.$route.query.id}).then(data=>{
        orderList.push(data.data.data)
      })
    }else{
      this.sumupprice=this.$route.query.pprice
    let resArr=this.$route.query.id
   
    for(let i=0;i<resArr.length;i++){
      api.getproinfo({pid:resArr[i]}).then(data=>{
        orderList.push(data.data.data)
      })
    }
    }
    this.orderList=orderList
    // api.getproinfo({ pid: this.$route.query.id }).then(data => {
    //   this.shop = data.data.data;
    //   console.log(data.data.data);
    // });
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.con {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  height: 66px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  font-size: 14px;
  color: #333333;
}
header .left {
  display: flex;
  align-items: center;
}
header .left p {
  margin-left: 5px;
}
header .center p {
  font-size: 18px;
}
main {
  flex: 1;
  overflow: auto;
}
.main1 {
  height: 60px;
  background: #fff1f4;
  display: flex;
  padding: 0 20px;
  align-items: center;
}
.goods {
  color: #e65544;
  font-size: 30px;
  margin-top: -10px;
}
.main1 p {
  margin-left: 10px;
  font-size: 14px;
  color: #655f5f;
}
.content {
  width: 100%;
  display: flex;
  justify-content: center;
}
.main2 {
  margin-top: 40px;
  height: 450px;
  width: 80%;
  box-shadow: 0 0 10px #666;
  border-radius: 5px;
}
.mm {
  padding: 0 10px;
}
.m1 {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m1 .left {
  font-size: 14px;
  color: #505050;
}
.m1 .right {
  width: 25px;
  height: 25px;
  background: #999999;
  font-size: 14px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.m2 {
  height: 80px;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
}
.bg {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px
}
.bg img {
  width: 60px;
  height: 60px;
}
.main3,
.main4,
.main5 {
  padding: 0 10px;
  display: flex;
  height: 30px;
  justify-content: space-between;
  color: #7e7e7e;
  align-items: center;
  font-size: 14px;
}
.main4 {
  height: 40px;
  background: #f8f8f8;
  font-size: 16px;
  color: #303030;
  display: flex;
  align-items: center;
}
.main5 {
  height: 36px;
}
.main6 {
  padding: 0 10px;
}
span {
  font-size: 14px;
}
.main7 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.truepay {
  width: 95%;
  height: 40px;
  line-height: 40px;
  margin-top: 10px;
}
</style>